<template>
    <div>
        <show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"
                        @selectView="selectView"></show-view-path>
        <div style="height: 100%" :ref="config.key"></div>
    </div>
</template>

<script>
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';

/**
 * 漏斗图
 */
export default {
    name: "funnelChart-view",
    mixins: [ChartPublic, ChartStyle],
    data() {
        return {
            chartType: "funnel"
        }
    },
    methods: {
        setOption() {
            //图例组件
            let data = [];
            let legend = [];
            //静态数据模式
            if (this.config.dataSources.source == "static") {
                if (this.config.dataSources.staticData) {
                    //静态数据
                    let staticData = JSON.parse(this.config.dataSources.staticData);
                    for (let i = 0; i < staticData.length; i++) {
                        if (staticData[i].name) {
                            legend.push(staticData[i].name);
                        }
                    }
                    data = staticData;
                }
            } else {
                legend = this.dimensionVals;
                for (let i = 0; i < legend.length; i++) {
                    let val = this.measureVals[i] ? this.measureVals[i].value : "";
                    let name=legend[i] || "";
                    //配置了字段渲染
                    if(typeof(legend[i] ) !="string" ){
                        name=legend[i].newValue;
                    }
                    data.push({value: val, name: name })
                }
            }
            let formatter = this.config.advancedConf.formatter ? this.config.advancedConf.formatter : '';
            let tooltip = this.chartTooltip()
            tooltip.trigger = 'item';
            tooltip['formatter'] = '{a} <br/>{b} : {c}' + formatter;
            let obj = {
                name: this.config.title,
                type: this.chartType,
                minSize: this.config.styles.funnelConfig.minSize + this.config.styles.funnelConfig.minSizeSuffix,
                maxSize: this.config.styles.funnelConfig.maxSize + this.config.styles.funnelConfig.maxSizeSuffix,
                label: {
                    show: true,
                    position: this.config.styles.funnelConfig.position,
                    fontSize: this.config.styles.funnelConfig.fontSize,
                    color: this.config.styles.funnelConfig.fontColor
                },
                emphasis: {
                    label: {
                        fontSize: this.config.advancedConf.fontSize
                    }
                },
                sort: this.config.advancedConf.sort,
                data: data
            }
            let formatterLabel = '';
            if (this.config.styles.funnelConfig.showName) {
                formatterLabel = '{b} '
            }
            if (this.config.styles.funnelConfig.showValue) {
                formatterLabel = formatterLabel + ' {c}'
            }
            if (this.config.styles.funnelConfig.showPercentage) {
                formatterLabel = formatterLabel + ' ({d}%)'
            }
            obj.label['formatter'] = formatterLabel;
            let grid = this.chartGrid()
            obj = Object.assign(obj, grid);
            if (this.config.styles.seriesFunnel) {
                if (this.config.styles.seriesFunnel.topSuffix == 'px') {
                    obj.top = this.config.styles.seriesFunnel.top;
                } else {
                    obj.top = this.config.styles.seriesFunnel.top + '%';
                }
                if (this.config.styles.seriesFunnel.rightSuffix == 'px') {
                    obj.right = this.config.styles.seriesFunnel.right;
                } else {
                    obj.right = this.config.styles.seriesFunnel.right + '%';
                }
                if (this.config.styles.seriesFunnel.bottomSuffix == 'px') {
                    obj.bottom = this.config.styles.seriesFunnel.bottom;
                } else {
                    obj.bottom = this.config.styles.seriesFunnel.bottom + '%';
                }
                if (this.config.styles.seriesFunnel.leftSuffix == 'px') {
                    obj.left = this.config.styles.seriesFunnel.left;
                } else {
                    obj.left = this.config.styles.seriesFunnel.left + '%';
                }
            }
            this.option = {
                tooltip: tooltip,//提示框的样式修改
                toolbox: this.chartToolbox(),//工具栏目配置
                color: this.getColors(),
                legend: this.chartLegend(legend),//图例
                series: [obj]
            };
        }
    },
}
</script>

<style scoped>
</style>
